<template>
	<div class="box">
		<el-tabs type="border-card" tabPosition="left" style="height: calc(100vh - 110px);" model-value="3">
			<el-tab-pane name="1" label="基本信息">
				<div class="info">
					<div class="infoitem">
						<span>头像：</span>
						<el-image style="width: 200px; height: 200px; vertical-align: middle;" :src="avater"
							:zoom-rate="1.2" :preview-src-list="[avater]" fit="cover" />
						<div class="tx">
							<el-upload class="upload-demo" :show-file-list="false"
								action="http://localhost:3366/zjb/img" :limit="1" :on-exceed="handleExceed"
								:on-success="onsuccess">
								<el-button type="primary">点击上传</el-button>
							</el-upload>
							<el-button :disabled="qrtx" type="primary" @click="onsuccessqr">确认修改</el-button>
						</div>
					</div>
					<div class="infoitem">
						<span>用户名：</span>
						<el-input v-model="username" disabled />
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane name="2" label="换绑手机">
				<el-steps :space="200" :active="active" simple>
					<el-step title="验证旧手机" :icon="Lock" />
					<el-step title="绑定新手机" :icon="Switch" />
					<el-step title="完成" :icon="CircleCheck" />
				</el-steps>
				<div class="mobile1" v-if="active === 1">
					<div class="info"><span></span>点击获取验证码，短信将发送至您的绑定手机</div>
					<div class="mobile">{{ String(mobile).slice(0,3) }}****{{ String(mobile).slice(-4) }}</div>
					<el-input v-model="yzm" style="width: 30%;" />
					<el-button type="primary" @click="onShow">{{ butinner }}</el-button>
					<div style="text-align: center;margin: 50px 0;">
						<el-button style="" type="primary" @click="Next">下一步</el-button>
					</div>
					<Vcode :show="isShow" @success="onSuccess" @close="onClose" />
				</div>
				<div class="mobile2" v-if="active === 2">
					<div class="info"><span></span>点击获取验证码，短信将发送至您的新手机</div>
					<div style="margin: 20px 0;">
						<span>新手机号码：</span> <el-input v-model="newmobile" style="width: 30%;" />
					</div>
					<el-input v-model="yzm" style="width: 30%;" />
					<el-button type="primary" @click="onShow2">{{ butinner2 }}</el-button>
					<div style="text-align: center;margin: 50px 0;">
						<el-button style="" type="primary" @click="Next2">下一步</el-button>
					</div>
					<Vcode :show="isShow" @success="onSuccess2" @close="onClose" />
				</div>
				<div class="mobile3" v-if="active === 3">
					<el-result icon="success" title="修改成功" />
				</div>

			</el-tab-pane>
			<el-tab-pane name="3" label="密码修改">
				<el-steps :space="200" :active="active2" simple>
					<el-step title="验证手机号" :icon="Lock" />
					<el-step title="设置新密码" :icon="Switch" />
					<el-step title="完成" :icon="CircleCheck" />
				</el-steps>
				<div class="mobile1" v-if="active2 === 1">
					<div class="info"><span></span>点击获取验证码，短信将发送至您的绑定手机</div>
					<div class="mobile">{{ String(mobile).slice(0,3) }}****{{ String(mobile).slice(-4) }}</div>
					<el-input v-model="yzm" style="width: 30%;" />
					<el-button type="primary" @click="onShow3">{{ butinner3 }}</el-button>
					<div style="text-align: center;margin: 50px 0;">
						<el-button style="" type="primary" @click="Next3">下一步</el-button>
					</div>
					<Vcode :show="isShow" @success="onSuccess3" @close="onClose" />
				</div>
				<div class="mobile1" v-if="active2 === 2">
					<div style="margin: 30px 0;">
						<span>&nbsp;&nbsp;&nbsp;新密码：</span><el-input v-model="password" style="width: 30%;" />
					</div>
					<div>
						<span>确认密码：</span><el-input v-model="password2" style="width: 30%;" />
					</div>
					<div style="text-align: center;margin: 50px 0;">
						<el-button style="" type="primary" @click="Next4">下一步</el-button>
					</div>
					<Vcode :show="isShow" @success="onSuccess3" @close="onClose" />
				</div>
				<div class="mobile3" v-if="active2 === 3">
					<el-result icon="success" title="修改成功" />
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue';
	import axios from '../../api/index.js';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Lock,
		Switch,
		CircleCheck
	} from '@element-plus/icons-vue'
	import Vcode from "vue3-puzzle-vcode"
	import router from '@/router/index.js';
	// 初始化
	let id = localStorage.getItem("_id")
	let avater = ref("")
	let username = ref('')
	let mobile = ref('')
	onMounted(() => {
		axios.get("/zjb/myinfo/" + id).then(({
			data
		}) => {
			console.log(data.data);
			avater.value = data.data.avater
			username.value = data.data.username
			mobile.value = data.data.mobile
		})
	})
	// 头像
	const fileList = ref([])
	let qrtx = ref(true)
	const handleExceed = () => ElMessage.warning("请勿重复提交")

	const onsuccess = (file) => {
		avater.value = file.data
		qrtx.value = false
	}
	const onsuccessqr = () => {
		axios.patch("/zjb/updateadmin/" + id, {
			avater: avater.value
		}).then(({
			data
		}) => {
			console.log(data);
		})
	}
	// 手机号
	const active = ref(1)
	let butinner = ref("获取验证码")
	let butinner2 = ref("获取验证码")
	let YZM = ref("")
	let yzm = ref("")
	let isShow = ref(false)
	let newmobile = ref("15081609437")
	const dateYan = async () => {
		if (butinner.value === '获取验证码') {
			const {
				data
			} = await axios.post("/zjb/getYz", {
				mobile: mobile.value
			})
			if (data.code === 200) {
				YZM.value = data.num
				ElMessage({
					message: data.message + data.num,
					type: 'success',
				})
			} else {
				ElMessage({
					message: data.message,
					type: 'info',

				})
			}
			let numa = 60;
			var abc = setInterval(() => {
				let numaa = numa--;
				butinner.value = `${numaa}秒后重新发送`;
				if (numaa <= 0) {
					butinner.value = '获取验证码';
					clearInterval(abc);
				}
			}, 1000);
		}
	}
	const Next = () => {
		if (YZM.value === yzm.value && YZM.value !== "") {
			YZM.value = ""
			yzm.value = ""
			active.value += 1
		} else {
			ElMessage.info("请输入验证码")
		}
	}
	const onShow = () => {
		if (butinner.value === "获取验证码") {
			isShow.value = true;
		}
	};
	const onClose = () => {
		isShow.value = false;
	};
	const onSuccess = () => {
		dateYan()
		onClose(); // 验证成功，需要手动关闭模态框
	}
	const dateYan2 = async () => {
		if (butinner2.value === '获取验证码') {
			const {
				data
			} = await axios.post("/zjb/getYz", {
				mobile: newmobile.value
			})
			if (data.code === 200) {
				YZM.value = data.num
				ElMessage({
					message: data.message + data.num,
					type: 'success',
				})
			} else {
				ElMessage({
					message: data.message,
					type: 'info',

				})
			}
			let numa = 60;
			var abc = setInterval(() => {
				let numaa = numa--;
				butinner2.value = `${numaa}秒后重新发送`;
				if (numaa <= 0) {
					butinner2.value = '获取验证码';
					clearInterval(abc);
				}
			}, 1000);
		}
	}
	const onShow2 = () => {
		if (butinner2.value === "获取验证码") {
			isShow.value = true;
		}
	};
	const onClose2 = () => {
		isShow.value = false;
	};
	const onSuccess2 = () => {
		if (/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(newmobile.value)) {
			dateYan2()
		} else {
			ElMessage.error("手机号格式错误")
		}
		isShow.value = false;
	};
	const Next2 = async () => {
		if (YZM.value === yzm.value && YZM.value !== "") {
			YZM.value = ""
			yzm.value = ""
			active.value += 1
			const {
				data
			} = await axios.patch("/zjb/updateadmin/" + id, {
				mobile: newmobile.value
			})
		} else {
			ElMessage.info("请输入验证码")
		}
	}
	// 密码
	const active2 = ref(2)
	let butinner3 = ref("获取验证码")
	let password = ref("")
	let password2 = ref("")
	const onShow3 = () => {
		if (butinner3.value === "获取验证码") {
			isShow.value = true;
		}
	};
	const dateYan3 = async () => {
		if (butinner3.value === '获取验证码') {
			const {
				data
			} = await axios.post("/zjb/getYz", {
				mobile: mobile.value
			})
			if (data.code === 200) {
				YZM.value = data.num
				ElMessage({
					message: data.message + data.num,
					type: 'success',
				})
			} else {
				ElMessage({
					message: data.message,
					type: 'info',

				})
			}
			let numa = 60;
			var abc = setInterval(() => {
				let numaa = numa--;
				butinner3.value = `${numaa}秒后重新发送`;
				if (numaa <= 0) {
					butinner3.value = '获取验证码';
					clearInterval(abc);
				}
			}, 1000);
		}
	}
	const onSuccess3 = () => {
		dateYan3()
		isShow.value = false;
	};
	const Next3 = () => {
		if (YZM.value === yzm.value && YZM.value !== "") {
			YZM.value = ""
			yzm.value = ""
			active2.value += 1
		} else {
			ElMessage.info("请输入验证码")
		}
	}
	const Next4 = async () => {
		if (password.value === password2.value && password.value !== "") {
			active2.value += 1
			const {
				data
			} = await axios.patch("/zjb/updateadmin/" + id, {
				password: password.value
			})
			password.value = ""
			password2.value = ""
			ElMessage.success("即将返回登录界面")
			setTimeout(() => {
				localStorage.removeItem("_id")
				localStorage.removeItem("token")
				router.push("/login")
			}, 2000)
		} else {
			ElMessage.info("请输入密码")
		}
	}
</script>

<style scoped>
	/* 头像 */
	.infoitem {
		border-bottom: 1px solid #eee;
		margin: 20px;
		padding: 20px;
		line-height: 50px;
		width: 600px;
	}

	.tx {
		float: right;
		margin-right: 20%;
	}

	.infoitem span {
		display: inline-block;
		width: 15%;
	}

	.el-input {
		width: 85%;
	}

	/* 手机 */
	.mobile1,
	.mobile2 {
		margin: 20px 0;
	}

	.mobile1 .info span,
	.mobile2 .info span {
		border: 2px solid #000;
		margin-right: 10px;
	}

	.mobile1 .mobile {
		margin: 20px 0;
	}

	.phone {
		color: blue;
		float: right;
		cursor: pointer;
	}
</style>